"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _vue = require("vue");

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _isEqual = _interopRequireDefault(require("lodash/isEqual"));

var _FilterFilled = _interopRequireDefault(require("@ant-design/icons-vue/lib/icons/FilterFilled"));

var _button = _interopRequireDefault(require("../../../button"));

var _menu = _interopRequireDefault(require("../../../menu"));

var _checkbox = _interopRequireDefault(require("../../../checkbox"));

var _radio = _interopRequireDefault(require("../../../radio"));

var _dropdown = _interopRequireDefault(require("../../../dropdown"));

var _empty = _interopRequireDefault(require("../../../empty"));

var _FilterWrapper = _interopRequireDefault(require("./FilterWrapper"));

var _classNames2 = _interopRequireDefault(require("../../../_util/classNames"));

var _useConfigInject2 = _interopRequireDefault(require("../../../_util/hooks/useConfigInject"));

var _context = require("../../context");

var SubMenu = _menu.default.SubMenu,
    MenuItem = _menu.default.Item;

function hasSubMenu(filters) {
  return filters.some(function (_ref) {
    var children = _ref.children;
    return children && children.length > 0;
  });
}

function renderFilterItems(_ref2) {
  var filters = _ref2.filters,
      prefixCls = _ref2.prefixCls,
      filteredKeys = _ref2.filteredKeys,
      filterMultiple = _ref2.filterMultiple,
      locale = _ref2.locale;

  if (filters.length === 0) {
    // wrapped with <div /> to avoid react warning
    // https://github.com/ant-design/ant-design/issues/25979
    return (0, _vue.createVNode)(MenuItem, {
      "key": "empty"
    }, {
      default: function _default() {
        return [(0, _vue.createVNode)("div", {
          "style": {
            margin: '16px 0'
          }
        }, [(0, _vue.createVNode)(_empty.default, {
          "image": _empty.default.PRESENTED_IMAGE_SIMPLE,
          "description": locale.filterEmptyText,
          "imageStyle": {
            height: 24
          }
        }, null)])];
      }
    });
  }

  return filters.map(function (filter, index) {
    var key = String(filter.value);

    if (filter.children) {
      return (0, _vue.createVNode)(SubMenu, {
        "key": key || index,
        "title": filter.text,
        "popupClassName": "".concat(prefixCls, "-dropdown-submenu")
      }, {
        default: function _default() {
          return [renderFilterItems({
            filters: filter.children,
            prefixCls: prefixCls,
            filteredKeys: filteredKeys,
            filterMultiple: filterMultiple,
            locale: locale
          })];
        }
      });
    }

    var Component = filterMultiple ? _checkbox.default : _radio.default;
    return (0, _vue.createVNode)(MenuItem, {
      "key": filter.value !== undefined ? key : index
    }, {
      default: function _default() {
        return [(0, _vue.createVNode)(Component, {
          "checked": filteredKeys.includes(key)
        }, null), (0, _vue.createVNode)("span", null, [filter.text])];
      }
    });
  });
}

var _default2 = (0, _vue.defineComponent)({
  name: 'FilterDropdown',
  props: ['tablePrefixCls', 'prefixCls', 'dropdownPrefixCls', 'column', 'filterState', 'filterMultiple', 'columnKey', 'triggerFilter', 'locale', 'getPopupContainer'],
  setup: function setup(props, _ref3) {
    var slots = _ref3.slots;
    var contextSlots = (0, _context.useInjectSlots)();
    var filterDropdownVisible = (0, _vue.computed)(function () {
      return props.column.filterDropdownVisible;
    });
    var visible = (0, _vue.ref)(false);
    var filtered = (0, _vue.computed)(function () {
      var _a;

      return !!(props.filterState && (((_a = props.filterState.filteredKeys) === null || _a === void 0 ? void 0 : _a.length) || props.filterState.forceFiltered));
    });
    var filterDropdownRef = (0, _vue.computed)(function () {
      var _props$column = props.column,
          filterDropdown = _props$column.filterDropdown,
          _props$column$slots = _props$column.slots,
          slots = _props$column$slots === void 0 ? {} : _props$column$slots,
          customFilterDropdown = _props$column.customFilterDropdown;
      return filterDropdown || slots.filterDropdown && contextSlots.value[slots.filterDropdown] || customFilterDropdown && contextSlots.value.customFilterDropdown;
    });
    var filterIconRef = (0, _vue.computed)(function () {
      var _props$column2 = props.column,
          filterIcon = _props$column2.filterIcon,
          _props$column2$slots = _props$column2.slots,
          slots = _props$column2$slots === void 0 ? {} : _props$column2$slots;
      return filterIcon || slots.filterIcon && contextSlots.value[slots.filterIcon] || contextSlots.value.customFilterIcon;
    });

    var triggerVisible = function triggerVisible(newVisible) {
      var _a, _b;

      visible.value = newVisible;
      (_b = (_a = props.column).onFilterDropdownVisibleChange) === null || _b === void 0 ? void 0 : _b.call(_a, newVisible);
    };

    var mergedVisible = (0, _vue.computed)(function () {
      return typeof filterDropdownVisible.value === 'boolean' ? filterDropdownVisible.value : visible.value;
    });
    var propFilteredKeys = (0, _vue.computed)(function () {
      var _a;

      return (_a = props.filterState) === null || _a === void 0 ? void 0 : _a.filteredKeys;
    });
    var filteredKeys = (0, _vue.shallowRef)([]);

    var onSelectKeys = function onSelectKeys(_ref4) {
      var selectedKeys = _ref4.selectedKeys;
      filteredKeys.value = selectedKeys;
    };

    (0, _vue.watch)(propFilteredKeys, function () {
      onSelectKeys({
        selectedKeys: propFilteredKeys.value || []
      });
    }, {
      immediate: true
    });
    var openKeys = (0, _vue.shallowRef)([]);
    var openRef = (0, _vue.ref)();

    var onOpenChange = function onOpenChange(keys) {
      openRef.value = setTimeout(function () {
        openKeys.value = keys;
      });
    };

    var onMenuClick = function onMenuClick() {
      clearTimeout(openRef.value);
    };

    (0, _vue.onBeforeUnmount)(function () {
      clearTimeout(openRef.value);
    }); // ======================= Submit ========================

    var internalTriggerFilter = function internalTriggerFilter(keys) {
      var column = props.column,
          columnKey = props.columnKey,
          filterState = props.filterState;
      var mergedKeys = keys && keys.length ? keys : null;

      if (mergedKeys === null && (!filterState || !filterState.filteredKeys)) {
        return null;
      }

      if ((0, _isEqual.default)(mergedKeys, filterState === null || filterState === void 0 ? void 0 : filterState.filteredKeys)) {
        return null;
      }

      props.triggerFilter({
        column: column,
        key: columnKey,
        filteredKeys: mergedKeys
      });
    };

    var onConfirm = function onConfirm() {
      triggerVisible(false);
      internalTriggerFilter(filteredKeys.value);
    };

    var onReset = function onReset() {
      filteredKeys.value = [];
      triggerVisible(false);
      internalTriggerFilter([]);
    };

    var doFilter = function doFilter() {
      var _ref5 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
        closeDropdown: true
      },
          closeDropdown = _ref5.closeDropdown;

      if (closeDropdown) {
        triggerVisible(false);
      }

      internalTriggerFilter(filteredKeys.value);
    };

    var onVisibleChange = function onVisibleChange(newVisible) {
      if (newVisible && propFilteredKeys.value !== undefined) {
        // Sync filteredKeys on appear in controlled mode (propFilteredKeys.value !== undefiend)
        filteredKeys.value = propFilteredKeys.value || [];
      }

      triggerVisible(newVisible); // Default will filter when closed

      if (!newVisible && !filterDropdownRef.value) {
        onConfirm();
      }
    };

    var _useConfigInject = (0, _useConfigInject2.default)('', props),
        direction = _useConfigInject.direction;

    return function () {
      var _a;

      var tablePrefixCls = props.tablePrefixCls,
          prefixCls = props.prefixCls,
          column = props.column,
          dropdownPrefixCls = props.dropdownPrefixCls,
          filterMultiple = props.filterMultiple,
          locale = props.locale,
          getPopupContainer = props.getPopupContainer; // ======================== Style ========================

      var dropdownMenuClass = (0, _classNames2.default)((0, _defineProperty2.default)({}, "".concat(dropdownPrefixCls, "-menu-without-submenu"), !hasSubMenu(column.filters || [])));
      var dropdownContent;

      if (typeof filterDropdownRef.value === 'function') {
        dropdownContent = filterDropdownRef.value({
          prefixCls: "".concat(dropdownPrefixCls, "-custom"),
          setSelectedKeys: function setSelectedKeys(selectedKeys) {
            return onSelectKeys({
              selectedKeys: selectedKeys
            });
          },
          selectedKeys: filteredKeys.value,
          confirm: doFilter,
          clearFilters: onReset,
          filters: column.filters,
          visible: mergedVisible.value,
          column: column.__originColumn__
        });
      } else if (filterDropdownRef.value) {
        dropdownContent = filterDropdownRef.value;
      } else {
        var selectedKeys = filteredKeys.value;
        dropdownContent = (0, _vue.createVNode)(_vue.Fragment, null, [(0, _vue.createVNode)(_menu.default, {
          "multiple": filterMultiple,
          "prefixCls": "".concat(dropdownPrefixCls, "-menu"),
          "class": dropdownMenuClass,
          "onClick": onMenuClick,
          "onSelect": onSelectKeys,
          "onDeselect": onSelectKeys,
          "selectedKeys": selectedKeys,
          "getPopupContainer": getPopupContainer,
          "openKeys": openKeys.value,
          "onOpenChange": onOpenChange
        }, {
          default: function _default() {
            return renderFilterItems({
              filters: column.filters || [],
              prefixCls: prefixCls,
              filteredKeys: filteredKeys.value,
              filterMultiple: filterMultiple,
              locale: locale
            });
          }
        }), (0, _vue.createVNode)("div", {
          "class": "".concat(prefixCls, "-dropdown-btns")
        }, [(0, _vue.createVNode)(_button.default, {
          "type": "link",
          "size": "small",
          "disabled": selectedKeys.length === 0,
          "onClick": onReset
        }, {
          default: function _default() {
            return [locale.filterReset];
          }
        }), (0, _vue.createVNode)(_button.default, {
          "type": "primary",
          "size": "small",
          "onClick": onConfirm
        }, {
          default: function _default() {
            return [locale.filterConfirm];
          }
        })])]);
      }

      var menu = (0, _vue.createVNode)(_FilterWrapper.default, {
        "class": "".concat(prefixCls, "-dropdown")
      }, {
        default: function _default() {
          return [dropdownContent];
        }
      });
      var filterIcon;

      if (typeof filterIconRef.value === 'function') {
        filterIcon = filterIconRef.value({
          filtered: filtered.value,
          column: column.__originColumn__
        });
      } else if (filterIconRef.value) {
        filterIcon = filterIconRef.value;
      } else {
        filterIcon = (0, _vue.createVNode)(_FilterFilled.default, null, null);
      }

      return (0, _vue.createVNode)("div", {
        "class": "".concat(prefixCls, "-column")
      }, [(0, _vue.createVNode)("span", {
        "class": "".concat(tablePrefixCls, "-column-title")
      }, [(_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots)]), (0, _vue.createVNode)(_dropdown.default, {
        "overlay": menu,
        "trigger": ['click'],
        "visible": mergedVisible.value,
        "onVisibleChange": onVisibleChange,
        "getPopupContainer": getPopupContainer,
        "placement": direction.value === 'rtl' ? 'bottomLeft' : 'bottomRight'
      }, {
        default: function _default() {
          return [(0, _vue.createVNode)("span", {
            "role": "button",
            "tabindex": -1,
            "class": (0, _classNames2.default)("".concat(prefixCls, "-trigger"), {
              active: filtered.value
            }),
            "onClick": function onClick(e) {
              e.stopPropagation();
            }
          }, [filterIcon])];
        }
      })]);
    };
  }
});

exports.default = _default2;